<template>
  <div>
    <el-row>
      <el-col>
        <h1>
        <!-- 加入小图标 -->
        <i class="el-icon-mobile-phone"></i>
        {{sysname}}
        </h1>
      </el-col>
    </el-row>

    <el-row type="flex" justify="start">
      <el-button type="primary" icon="el-icon-plus" @click="toadd()">新增</el-button>
    </el-row>

    <el-row>
      <el-col>
        <el-table :data="list">
          <el-table-column prop="title" label="标题"></el-table-column>
          <el-table-column prop="sellPoint" label="卖点"></el-table-column>
          <el-table-column prop="price" label="价格"></el-table-column>
          <el-table-column prop="note" label="详情"></el-table-column>

          <el-table-column label="[操作]" width="215">
            <el-button type="success" icon="el-icon-edit" @click="toupdate()">修改</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="del()">删除</el-button>
          </el-table-column>
        </el-table>

      </el-col>
    </el-row>

    <!-- 定义对话框 -->
    <el-dialog :visible.sync="dialogVisible" width="30%" title="提示">
      <span>
        <!-- 加入一个form表单 -->
        <el-form :model="m" label-width="80px">
          <el-form-item label="标题:">
            <el-input v-model="m.title"></el-input>
          </el-form-item>

          <el-form-item label="卖点:">
            <el-input v-model="m.sellPoint"></el-input>
          </el-form-item>

          <el-form-item label="价格:">
            <el-input v-model="m.price"></el-input>
          </el-form-item>

          <el-form-item label="详情:">
            <el-input type="textarea" v-model="m.note"></el-input>
          </el-form-item>
        </el-form>

      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger">取消</el-button>
        <el-button type="success" @click="save()">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  // 定义一个组件导出
  export default{
    name: 'Item',
    data(){
      return{
        sysname: '京淘电商平台',
        dialogVisible: false,//公用变量,修饰对话框是否展现
        m: { //为对话框表单声明对象变量,设置初始值
          title: '',//v-model双向绑定:当修改表单的内容,这里的值也会随之改变
          sellPoint: '',
          price: '',
          note: ''
        },
        list: [
          {
            title:'javascript入门宝典',
            sellPoint: '这本书很实用',
            price: 99,
            note: '主流畅销书'
          },
          {
            title: 'java是全球第一大语言',
            sellPoint: 'java从业人最多',
            price: 188,
            note: '学Java拿高薪'
          }
        ]
      }
    },
    methods:{
      toadd: function(){
        //在方法区引用数据区数据,要加this关键字
        this.dialogVisible = true;//展现对话框
        this.m = {};  //利用js动态特点,把所有属性置空
      },
      toupdate: function(){
        console.log("转向修改方法")
      },
      del: function(){
        console.log("执行删除方法")
      },
      save: function(){ //新增和修改复用这个按钮,主流开发习惯方式
        console.log(this.m)
      }
    }
  }
</script>

<style>
  textarea{
    font-family: "微软雅黑";
  }
</style>
